<template>
  <div class="comment-reply">
    <div class="comment-header" @click="toLogin">
      <edu-textarea :value.sync="textarea" :args="argsTextarea"></edu-textarea>
      <el-row type="flex" justify="end" class="comment-reply-btn">
        <el-button size="mini" plain @click="cancel">取消</el-button>
        <el-button
          :type="isBtnInfo"
          size="mini"
          :disabled="isDisabled"
          @click="handleCommentReplySend"
          >发表</el-button
        >
      </el-row>
    </div>
    <div class="reply-list" v-if="replyList.length">
      <el-row class="reply-item" type="flex" v-for="(item, index) in replyList" :key="index">
        <edu-avatar
          shape="circle"
          :size="40"
          :src="item.avatar_url"
          @click="goUser(item.user_id)"
        ></edu-avatar>
        <div class="reply-wrap">
          <el-row type="flex" align="middle">
            <div class="name" @click="goUser(item.user_id)">{{ item.nick_name }}</div>
          </el-row>
          <div class="text">
            <template v-if="item.reply_user_id != 0">
              回复
              <span class="text-reply">@{{ item.reply_user }}</span
              >：
            </template>
            {{ item.content }}
          </div>
          <el-row type="flex" align="middle">
            <div class="time-msg">{{ item.create_time | formatTime('{y}-{m}-{d}') }}</div>
            <div class="del-btn" @click="handleDeleteReply(item)">删除</div>
            <el-link
              class="reply-btn"
              :underline="false"
              @click="handleCommentReplyClick(item.user_id, item.nick_name)"
              >回复</el-link
            >
          </el-row>
        </div>
      </el-row>
      <div class="load-more" v-if="replyTotal > 2">
        <el-link
          type="primary"
          :underline="false"
          @click="loadMore"
          v-if="replyList.length != replyTotal"
          >展开更多</el-link
        >
        <span v-else>没有更多了~</span>
      </div>
    </div>
  </div>
</template>

<script>
import EduTextarea from '@/components/EduTextarea'
export default {
  components: {
    EduTextarea
  },
  props: ['id'],
  inject: ['reload'],
  data() {
    return {
      replyId: 0,
      textarea: '',
      argsTextarea: {
        minlength: 1,
        maxlength: 200,
        rows: 1,
        word_limit: 1,
        placeholder: '说点什么吧!'
      },
      pageCont: 5,
      replyList: [],
      comment: {},
      replyTotal: 0,
      isBtnInfo: 'info',
      isDisabled: true
    }
  },
  watch: {
    textarea() {
      if (this.textarea.trim().length > 0) {
        this.isDisabled = false
        this.isBtnInfo = 'primary'
      } else {
        this.isDisabled = true
        this.isBtnInfo = 'info'
      }
    }
  },
  mounted() {
    this.handleCommentReplyList(this.id, 5)
  },
  methods: {
    // 回复列表
    handleCommentReplyList(id, pageCont) {
      this.$api.getTopicCommentReply(
        id,
        {
          page: this.$store.getters['paginate/page'],
          count: pageCont
        },
        res => {
          this.replyList = res.data.commentReply.data
          this.replyTotal = res.data.commentReply.total
          this.comment = res.data.comment
          this.$store.dispatch('paginate/setPaginate', {
            listRows: pageCont,
            total: res.data.commentReply.total
          })
        }
      )
    },
    // 回复点评
    handleCommentReplySend(arr, id) {
      this.$globalToLogin(() => {
        this.$api.createTopicCommentReply(
          this.id,
          {
            reply_user_id: this.replyId,
            content: this.textarea.trim()
          },
          res => {
            this.$message.success(res.msg)
            this.textarea = ''
            this.handleCommentReplyList(this.id, 5)
            this.$emit('updateCount', 1)
          },
          error => {
            this.$message.error(error.msg)
          }
        )
      })
    },
    // 回复@人
    handleCommentReplyClick(id, name) {
      this.replyId = id
      this.textarea = ''
      this.argsTextarea.placeholder = '回复' + name + ':'
    },
    // 取消回复
    cancel() {
      this.replyId = 0
      this.textarea = ''
      this.argsTextarea.placeholder = '说点什么吧!'
    },
    loadMore() {
      this.pageCont += 5
      this.handleCommentReplyList(this.id, this.pageCont)
    },
    goUser(id) {
      this.$router.push({
        path: '/user',
        query: {
          id: id
        }
      })
    },
    toLogin() {
      this.$globalToLogin(() => {})
    },
    // 删除回复
    handleDeleteReply(item) {
      this.$messageBox
        .confirm('确定删除回复吗？', {
          center: true,
          type: '',
          showClose: true
        })
        .then(() => {
          this.$api.deleteTopicCommentReply(
            item.id,
            res => {
              this.$message.success(res.msg)
              this.handleCommentReplyList(this.id, 5)
              this.$emit('updateCount', 0)
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        })
        .catch(() => {})
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.comment-reply {
  margin-top: 10px;
  .comment-header {
    .comment-reply-btn {
      margin-top: 10px;
    }
  }
  .reply-list {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #f7f7f7;
  }
  .reply-item {
    padding: 15px 0;
    .reply-wrap {
      flex: 1;
      margin-left: 15px;
      .name {
        font-size: 14px;
        font-weight: 400;
        color: $text-color-secondary;
        cursor: pointer;
      }
      .text {
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
        color: $text-color-import;
        line-height: 24px;
        .text-reply {
          color: $text-color-secondary;
          font-size: 13px;
        }
      }
      .time-msg {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-secondary;
      }
      .reply-btn {
        margin-left: auto;
        font-size: 12px;
        font-weight: 400;
        color: $text-color-secondary;
      }
      .del-btn {
        font-size: 12px;
        font-weight: 400;
        color: $text-color-secondary;
        margin-left: 30px;
        cursor: pointer;
      }
    }
  }
  .load-more {
    margin-left: 55px;
    font-size: 13px;
    font-weight: 400;
    color: $text-color-secondary;
    .el-link {
      font-size: 13px;
      font-weight: 400;
      @include edu-color-auxiliary;
    }
  }
}
</style>
